<template>
	<view class="comp-wrap">
		<!-- {{list}} -->
		<y-tabs v-model="activeIndex" type="text" color="#333" titleActiveColor="#F56C6C" background="transparent" :ellipsis="false" animated direction="vertical" :pageScroll="false" @change="handleChange">
			<y-tab v-for="(tab, index) in list" :title="tab.name" :key="tab.title" />
			<!-- :imageSrc="index===activeIndex?arcImageSrc:''" -->
		</y-tabs>
	</view>
</template>

<script>
	import { getShopAll } from '../../apis/index.js'
	export default {
		name: 'leftNav',
		// 微信小程序端：自定义组件需要styleIsolation: 'shared',否则无法在当前文件中修改y-tabs组件的样式
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				// 左侧导航相关
				arcImageSrc: `${this.$imgUrl}tea/arc.png`,
				tabs: [],
				activeIndex: 0, // 标签页当前选择项的下标
				list:[],
			}
		},
		computed: {
			// 标签栏导航区域高度
			navHeight() {
				// H5端需要减去顶部导航栏高度
				let height = 0;
				// H5端导航栏高度
				// #ifdef H5
				height = 44;
				// #endif
				return `calc(100vh - ${height}px - 6px)`
			},
			nextTitle() {
				return this.tabs[this.activeIndex + 1]?.title || ""
			},
		},
		watch: {
			nextTitle: {
				immediate: true,
				handler(value) {
					this.$emit('changeNextTitle', value)
				}
			},
		},
		mounted() {
			this.getList()
		},
		methods: {
			async getList(){
				let res=await getShopAll({
					id:1
				})
				this.list=res.data.children
			},
			handleChange(index, title) {
				this.$emit('change', index, title)
			},
			// 切换activeIndex
			changeActiveIndex() {
				const index = this.tabs.findIndex(o => o.title === this.nextTitle);
				if (index > -1) this.activeIndex = index;
			}
		}
	}
</script>
<style lang="scss" scoped>
</style>